import { App } from 'vue'
import { createPinia, storeToRefs } from 'pinia'
// 引入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 引入权限
import { usePermissStore } from './permiss'

const store = createPinia()

// 使用持久化插件
store.use(piniaPluginPersistedstate)

const install = (Vue: App<Element>) => {
  // 注册pinia
  Vue.use(store)

  // 自定义权限指令
  const permissStore = usePermissStore()
  const { permissRole } = storeToRefs(permissStore)
  Vue.directive('permiss', {
    mounted(el, binding) {
      if (binding.value) {
        if (permissRole.value !== binding.value) {
          el['hidden'] = true
          el.style.display = 'none'
        }
      }
    },
    beforeUpdate(el, binding) {
      if (binding.value) {
        if (permissRole.value !== binding.value) {
          el['hidden'] = true
          el.style.display = 'none'
        } else {
          el['hidden'] = false
          el.style.display = 'block'
        }
      }
    }
  })
}

// 导出
export default install
